<template>
	<el-card class="sales">
		<template #header>
			<el-menu
				:default-active="state.activeIndex"
				class="el-menu-demo"
				mode="horizontal"
				@select="handleSelect"
			>
				<el-menu-item index="1">销售额</el-menu-item>
				<el-menu-item index="2">访问量</el-menu-item>
			</el-menu>
			<div class="right">
				<el-radio-group v-model="state.time">
					<el-radio-button label="今天" />
					<el-radio-button label="本周" />
					<el-radio-button label="本月" />
					<el-radio-button label="本年" />
				</el-radio-group>
				<el-date-picker
					v-model="state.value"
					type="daterange"
					unlink-panels
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:shortcuts="shortcuts"
					:size="size"
				/>
			</div>
		</template>
		<div class="sales-content">
			<v-chart :option="getOption()" autoresize></v-chart>
			<div class="content-list">
				<h4 class="list-title">
					门店{{ state.activeIndex === '1' ? '销售额' : '访问量' }}排名
				</h4>
				<ul>
					<li v-for="rank in rankData" :key="rank.no">
						<span :class="{ 'list-no': rank.no <= 3 }">{{ rank.no }}</span>
						<span>{{ rank.name }}</span>
						<span>{{ rank.count }}</span>
					</li>
				</ul>
			</div>
		</div>
	</el-card>
</template>

<script lang="ts">
export default {
	name: 'MiddleView',
}
</script>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { useReportDataStore } from '@/stores/reportData'

const reportDataStore = useReportDataStore()
const size = ref<'default' | 'large' | 'small'>('default')

const state = reactive({
	activeIndex: '1',
	time: '本周',
	value: '',
})

const shortcuts = [
	{
		text: '最近一周',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			return [start, end]
		},
	},
	{
		text: '最近一月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: '最近三个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
]

const orderFullYear = computed(() => reportDataStore.reportData.orderFullYear)
const orderFullYearAxis = computed(
	() => reportDataStore.reportData.orderFullYearAxis || []
)
const userFullYear = computed(() => reportDataStore.reportData.userFullYear)
const userFullYearAxis = computed(
	() => reportDataStore.reportData.userFullYearAxis || []
)

const orderRank = computed(() => reportDataStore.reportData.orderRank || [])
const userRank = computed(() => reportDataStore.reportData.userRank || [])

const rankData = computed(() =>
	state.activeIndex === '1' ? orderRank.value : userRank.value
)
const getOption = () => {
	const text = state.activeIndex === '1' ? '销售额趋势' : '访问量趋势'
	return {
		title: {
			text,
			textStyle: {
				fontSize: 14,
			},
		},
		xAxis: {
			type: 'category',
			data:
				state.activeIndex === '1'
					? orderFullYearAxis.value
					: userFullYearAxis.value,
		},
		yAxis: {
			type: 'value',
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			left: 50,
			top: 50,
			bottom: 50,
			right: 50,
		},
		series: [
			{
				data:
					state.activeIndex === '1' ? orderFullYear.value : userFullYear.value,
				type: 'bar',
				barWidth: '40%',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180,180,180,0.2)',
				},
			},
		],
	}
}

const handleSelect = (key: string, keyPath: string[]) => {
	state.activeIndex = key
}
</script>

<style lang="scss" scoped>
.sales {
	// margin-top: 20px;
	margin: 20px 0;
	:deep(.el-card__header) {
		border-bottom: none;
		padding: 0 20px;
		position: relative;
		.right {
			position: absolute;
			right: 10px;
			top: 10px;
			display: flex;
			align-items: center;
			.el-date-editor {
				margin-left: 20px;
			}
		}
	}
	.sales-content {
		display: flex;
		height: 300px;
		padding: 0 10px;
		.echarts {
			flex: 5;
		}
		.content-list {
			flex: 2;
			h4 {
				font-size: 14px;
				font-weight: 500;
			}
			ul {
				list-style: none;
				padding: 0 10px 0 0;
				li {
					font-size: 13px;
					height: 28px;
					// line-height: 28px;
					span {
						&:first-child {
							display: inline-block;
							width: 20px;
							height: 20px;
							line-height: 22px;
							text-align: center;
							margin-right: 10px;
						}
						&.list-no {
							background-color: #000;
							border-radius: 50%;
							color: #fff;
						}
						&:last-child {
							float: right;
						}
					}
				}
			}
		}
	}
}
</style>
